<template>
	<a-card style="margin: -15px;">
	<a-row style="margin-bottom: 1rem">

		<a-col :span="4">
			<a-space direction="vertical">
				<a-input v-model:value="this.queryFlowBo.inPhone" placeholder="获赠人手机号" />
			</a-space>
		</a-col>
		<a-col :span="4">
			<a-space direction="vertical">
				<a-input v-model:value="this.queryFlowBo.outPhone" placeholder="赠送人手机号" />
			</a-space>
		</a-col>
		<a-col :span="4">
			<a-space direction="vertical">
				<a-input v-model:value="this.queryFlowBo.name" placeholder="藏品名称(模糊搜索)" />
			</a-space>
		</a-col>
		<a-col :span="4">
			<a-button type="primary" @click="onSearch">搜索</a-button>
		</a-col>
	</a-row>
	<a-row style="margin-bottom: 1rem">
		<a-col :span="24">
			<a-table :columns="columns" :data-source="dataSource" :pagination="false">
				<template #bodyCell="{ column, record }">
					<!--藏品信息-->
					<template v-if="column.key === 'name'">
						<table>
							<tr>
								<td style="width:3rem; height:3rem;">
									<a-image :src="record.cover" height="50" width="50" />
								</td>
								<td style="width: 1rem"></td>
								<td><a>{{ record.name }}</a>
									<br />
									<span>{{ record.code }}</span>
								</td>
							</tr>
						</table>
					</template>
					<!--会员信息（赠送人）-->
					<template v-if="column.key === 'outPersonName'">
						<table>
							<tr>
								<td style="width:3rem; height:3rem;">
									<a-image :src="record.outPersonAvatar" height="50" width="50" />
								</td>
								<td style="width: 1rem"></td>
								<td><a>{{ record.outPersonName }}</a>
									<br />
									<span>{{ record.outPersonPhone }}</span>
								</td>
							</tr>
						</table>
					</template>
					<!--获赠人信息-->
					<template v-if="column.key === 'inPersonName'">
						<table>
							<tr>
								<td style="width:3rem; height:3rem;">
									<a-image :src="record.outPersonAvatar" height="50" width="50" />
								</td>
								<td style="width: 1rem"></td>
								<td><a>{{ record.inPersonName }}</a>
									<br />
									<span>{{ record.inPersonPhone }}</span>
								</td>
							</tr>
						</table>
					</template>
				</template>
			</a-table>
		</a-col>



	</a-row>


		<a-flex justify="flex-end">
			<a-pagination
				size="small"
				@change="onChange"
				show-size-changer
				:pageSizeOptions="['5','10','20','50','100']"
				v-model:current="this.page.pageNo"
				v-model:page-size="this.page.pageSize"
				:total="this.page.total"
				:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"/>
		</a-flex>
	</a-card>
</template>

<script>
import { DownOutlined } from "@ant-design/icons-vue";
import transferApi from "@/api/nft/artWork/nftTransfer";

export default {
	name: "Transfer",
	components: { DownOutlined },
	data() {
		return {
			dataSource: [],
			page: {
				pageNo: 1,
				pageSize: 5,
				total: 0
			},
			queryFlowBo: {
				inPhone: null,
				outPhone: null,
				name: null
			},
			columns: [
				{
					title: "藏品信息",
					dataIndex: "name",
					key: "name"
				},
				{
					title: "链上标识",
					dataIndex: "chainAddr",
					key: "chainAddr"
				},
				{
					title: "合约地址",
					dataIndex: "contractAddr",
					key: "contractAddr"
				},
				{
					title: "赠送信息",
					dataIndex: "inPersonName",
					key: "inPersonName"
				},
				{
					title: "获赠信息",
					dataIndex: "outPersonName",
					key: "outPersonName"
				},
				{
					title: "赠送时间",
					dataIndex: "flowTime",
					key: "flowTime"
				}
			]
		};
	},
	methods: {
		query() {
			transferApi.queryFlow(this.page.pageNo, this.page.pageSize, this.queryFlowBo).then((data) => {
				let pages = data;
				this.page.pageSize = pages.size;
				this.page.total = pages.total;
				this.dataSource = pages.records;
			});
		},//藏品转赠记录查询
		onSearch() {
			this.page.pageNO = 1;
			this.query();
		},
		onChange(pageNo) {
			this.query();
			this.page.pageNO = pageNo;
		}
	},
	mounted() {
		this.query();
	}
};
</script>

<style scoped>

</style>
